import React, { useEffect } from "react";
import { useParams, useLocation, useNavigate } from 'react-router-dom'

// path 动态参数部分
function Detail() {
    let id = null;
    const navigate = useNavigate();
    const paramsObj = useParams();
    // 是否有id
    if (paramsObj?.id) {
        id = paramsObj.id;
    } else {
        let SearchObj = new URLSearchParams(useLocation().search);
        console.log(SearchObj)
        if (SearchObj.get('id')) {
            id = SearchObj.get('id');
        }
    }

    useEffect(() => {
        if (!id) {
            navigate('/')
            // 没有id值 自动跳转首页
        }
    })

    // console.log(id);
    // const { id } = useParams();
    // console.log(id)
    // console.log(window.location.search);

    // 获取url ？ 后面的参数
    // let paramsObj = new URLSearchParams(useLocation().search);
    // console.log(paramsObj.get('id'));
    return (
        <>
            Detail {id}
        </>
    )
}

export default Detail;